import styled from "@emotion/styled";

export const PanelsContainer = styled.div`
  width: 755px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

export const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  width: 250px;
  display: flex;
  flex-direction: column;
`;
export const Title = styled.h3`
  padding: 8px;
  font-size: 22px;
  font-weight: bold;
`;
export const TaskList = styled.div<{ isDraggingOver?: boolean }>`
  padding: 8px;
  background-color: ${(props) => (props.isDraggingOver ? "#fab1a0" : "#fff")};
  display: flex;
  flex-direction: column;
  flex-grow: 1;
`;

type DraggingTask = {
  isDragging?: boolean;
};
export const TaskCon = styled.div<DraggingTask>`
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 8px;
  background-color: ${(props) => (props.isDragging ? "#fd79a8" : "#fff")};
`;
